import QtQuick
import Qt.labs.qmlmodels

Rectangle{
//    color: "transparent"
//    property QtObject target: QtObject{
//        property color border: "red"
//        property string name: "test"
//        property int age: 18
//        property bool isBoy: true
//        property var styles: ["dark","light"]
//        property string style: "dark"
//    }

    property QtObject target: null

    onTargetChanged: refreshPropertys(target)
    Component.onCompleted: refreshPropertys(target)

    color: Theme.backgroundColor
    border.color: Theme.borderColor
    border.width: Theme.borderWidth
    radius: Theme.radius

    width: Theme.ratio * 400


    ListModel{
        id: listModel
    }

    ListView{
        id: listView
        anchors.fill: parent
        anchors.margins: Theme.padding
        model: listModel
        delegate: PropertyDelegate{
            width: listView.width
            name: Property
            type: Type
//            value: Value
            Component.onCompleted: value = Value
            onValueChanged:{
                 Value = value
                target[Property] = value
                console.log("property onValueChanged",Value);
            }
        }
    }

    function refreshPropertys(item){
        if(null !== item){
            listModel.clear();

            var row = 0;
            for (var p in item){
                if("function" !== typeof item[p]){
                    console.log("Property",p,"Value",String("%1").arg(item[p]),"Type",(typeof item[p]));
                    var propertyType = typeof item[p];
                    if("object" === propertyType){
                        console.log("object class name:",Object(item[p]).toString);
                    }
                    listModel.append({"Property":p,"Value":String("%1").arg(item[p]),"Type":(typeof item[p])});
                }
            }
        }
    }

//    function typeName(rowIndex){
//        var modelIndex = tableModel.index(rowIndex,2);
//        var type = tableModel.data(modelIndex,"display");
//        return type;
//    }
}
